<?php
$profileModifiable = false;
$contactModifiable = false;
$socialModifiable = false;
$photoModifiable = false;
?>
<script type="text/javascript" src="<?php echo js_url() . "bootstrap.min.js"; ?>" >
</script>

<script>
    function modalPhoto(){
        var url = "<?php echo site_url("profile/editPhoto"); ?>";
        $.ajax({
            type: "POST",
            url: url,
            async: true,
            timeout: 15000, // 30 secondes
            success: function(data) {
                $("#photoModal").html(data).modal();
            },
            complete: function(a) {
            }
        });
    }
    
    function modalProfile() {
        var url = "<?php echo site_url("profile/editProfile"); ?>";
        $.ajax({
            type: "POST",
            url: url,
            async: true,
            timeout: 15000, // 30 secondes
            success: function(data) {
                $("#profileModal").html(data).modal();
            },
            complete: function(a) {
            }
        });
    }

    function modalContact() {
        var url = "<?php echo site_url("profile/editContact"); ?>";
        $.ajax({
            type: "POST",
            url: url,
            async: true,
            timeout: 15000, // 30 secondes
            success: function(data) {
                $("#contactModal").html(data).modal();
            },
            complete: function(a) {
            }
        });
    }

    function modalSocial() {
        var url = "<?php echo site_url("profile/editSocial"); ?>";
        $.ajax({
            type: "POST",
            url: url,
            async: true,
            timeout: 15000, // 30 secondes
            success: function(data) {
                $("#socialModal").html(data).modal();
            },
            complete: function(a) {
            }
        });
    }
</script>

<div class="span12" style="height:30px;">
</div>
<div class="span8">
    <ul class="nav nav-tabs" id="myTab">
        <li class="<?php echo $defaultTab=="photo"?"active":""; ?>"><a href="#photo">Photos</a></li>
        <li class="<?php echo $defaultTab=="profile"?"active":""; ?>"><a href="#profile">Profile</a></li>
        <li class="<?php echo $defaultTab=="contact"?"active":""; ?>"><a href="#contact">Contact </a></li>
        <li class="<?php echo $defaultTab=="social"?"active":""; ?>"><a href="#social">Social </a></li>
    </ul>   

    <div class="tab-content">
        <div class="tab-pane <?php echo $defaultTab=="photo"?"active":""; ?>" id="photo">
            <div style="width:100%; text-align: right">
                <button onclick="modalPhoto()" title="edit profile photo" type="button" class="btn btn-info" data-loading-text="Loading...">
                    <img width="20px" height="20px" src="<?php echo img_url() . "edit.png"; ?>"/>
                </button>
            </div>
            <form method="POST" id="frm_photo" action="<?php echo site_url("profile/saveTof"); ?>" enctype="multipart/form-data" >
                <div class="span2 label-profile" >Your photo</div>
                <div class="span2 value-profile" style="min-height: 100px;">
                    <?php
                    if (isset($user->tof) && ($user->tof != '0.jpg')) {
                        ?>
                        <img src='<?php echo css_url() . "../pht/" . $user->tof; ?>'/>
                        <?php
                    } else {
                        $photoModifiable = true;
                        ?>
                        <input id="tof" name="tof" type="file" >
                        <?php
                    }
                    ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div>
                <div class="clear"></div>
                <?php if ($photoModifiable) {
                    ?>

                    <div class="span3">
                        <div class="controls">
                            <input type="submit" id="savephoto" name="savephoto" class="btn btn-primary" value="Save photo" />
                        </div>
                    </div>
                    <div class="clear"></div>
                <?php } ?>
            </form>
        </div>

        <div class="tab-pane <?php echo $defaultTab=="profile"?"active":""; ?>" id="profile">
            <div style="width:100%; text-align: right">
                <button onclick="modalProfile()" title="edit information" type="button" class="btn btn-info" data-loading-text="Loading...">
                    <img width="20px" height="20px" src="<?php echo img_url() . "edit.png"; ?>"/>
                </button>
            </div>
            <form action="<?php echo site_url("profile/saveProfile"); ?>" id="frm_profile" method="POST">
                <div class="span2 label-profile" >First name</div>
                <div class="span2 value-profile">
                    <?php
                    if (isset($user->firstname)) {
                        echo $user->firstname;
                    }
                    ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div>
                <div class="clear"></div>
                <div class="span2 label-profile" >Last name</div>
                <div class="span2 value-profile">
                    <?php
                    if (isset($user->lastname)) {
                        echo $user->lastname;
                    }
                    ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div>
                <div class="clear"></div>
                <div class="span2 label-profile" >Email</div>
                <div class="span2 value-profile">
                    <?php
                    if (isset($user->mail)) {
                        echo $user->mail;
                    }
                    ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div>
                <div class="clear"></div>

                <div class="span2 label-profile" >Gender</div>
                <div class="span2 value-profile">
                    <?php
                    if (isset($user->sexe)) {
                        echo $user->sexe == "F" ? "Woman" : "Man";
                    }
                    ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div><div class="clear"></div>

                <!-- Birthday input-->
                <div class="span2 label-profile" >Birthday</div>
                <div class="span2 value-profile" id="divBirthday">
                    <?php
                    if (isset($user->birthday) && $user->birthday != null && $user->birthday != "0000-00-00") {
                        echo $user->birthday;
                    } else {
                        $profileModifiable = true;
                        ?>

                        <div class="input-append">
                            <input value="31/01/1995" 
                                   style="cursor: pointer; background-color: white; width: 200px; margin-left: 0px;" 
                                   readonly="readonly" name="birthday" 
                                   type="text" placeholder="Birthday" 
                                   class="input-xlarge birthday"
                                   id="inputBirthday">
                            <button onclick="$('.birthday').val('');
            return false;" class="btn">X</button>  
                        </div>
                        <?php
                    }
                    ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div>
                <div class="clear"></div>

                <div class="span2 label-profile" >Presentation</div>
                <div class="span2 value-profile" id="divPresentation">
                    <?php
                    if (isset($user->presentation)) {
                        echo $user->presentation;
                    } else {
                        $profileModifiable = true;
                        ?>
                        <textarea id="inputPresentation" name="presentation"></textarea>
                        <?php
                    }
                    ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div>
                <div class="clear"></div>
                <?php if ($profileModifiable) {
                    ?>

                    <div class="span3">
                        <div class="controls">
                            <button id="saveprofile" name="saveProfile" class="btn btn-primary">Save Profile</button>
                        </div>
                    </div>
                    <div class="clear"></div>
                <?php } ?>
            </form>
        </div>

        <div class="tab-pane <?php echo $defaultTab=="contact"?"active":""; ?>" id="contact">
            <div style="width:100%; text-align: right">
                <button onclick="modalContact()" title="edit information" type="button" class="btn btn-info" data-loading-text="Loading...">
                    <img width="20px" height="20px" src="<?php echo img_url() . "edit.png"; ?>"/>
                </button>
            </div>
            <form id="frm_contact" action="<?php echo site_url("profile/saveContact"); ?>" method="POST">
                <div class="span2 label-profile" >City</div>
                <div class="span2 value-profile" id="divCity">
                    <?php
                    if (isset($user->city)) {
                        echo $user->city;
                    } else {
                        $contactModifiable = true;
                        ?>
                        <input id="inputCity" name="city"
                               type="text" placeholder="City" class="input-xlarge">
                               <?php
                           }
                           ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div>
                <div class="clear"></div>

                <!-- Text input-->
                <div class="span2 label-profile" >Country</div>
                <div class="span2 value-profile" id="divCountry">
                    <?php
                    if (isset($user->country)) {
                        echo $user->country;
                    } else {
                        $contactModifiable = true;
                        ?>
                        <input id="inputCountry" name="country" type="text" placeholder="Country" class="input-xlarge">
                        <?php
                    }
                    ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div>
                <div class="clear"></div>

                <!-- Text input-->
                <div class="span2 label-profile" >Mobile</div>
                <div class="span2 value-profile" id="divMobile">
                    <?php
                    if (isset($user->mobile)) {
                        echo $user->mobile;
                    } else {
                        $contactModifiable = true;
                        ?>
                        <input id="inputMobile" name="mobile" type="text" placeholder="Mobile" class="input-xlarge">
                        <?php
                    }
                    ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div>
                <div class="clear"></div>
                <?php if ($contactModifiable) {
                    ?>

                    <div class="span3">
                        <div class="controls">
                            <button id="savecontact" name="savecontact" class="btn btn-primary">Save Contact</button>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <?php
                }
                ?>
            </form>
        </div>
        <div class="tab-pane <?php echo $defaultTab=="social"?"active":""; ?>" id="social">
            <div style="width:100%; text-align: right">
                <button onclick="modalSocial()" title="edit information" type="button" class="btn btn-info" data-loading-text="Loading...">
                    <img width="20px" height="20px" src="<?php echo img_url() . "edit.png"; ?>"/>
                </button>
            </div>
            <form method="POST" id="frm_social" action="<?php echo site_url("profile/saveSocial"); ?>" >
                <div class="span2 label-profile" >Facebook URL</div>
                <div class="span5 value-profile" id="divFacebook">
                    <?php
//                    echo "<pre>";
//                    print_r($user->networks);
//                    echo "</pre>";
                    $twitterIndex = 1;
                    if (isset($user->networks[0]->id) && ($user->networks[0]->id == 1)) {
                        echo "<a target='_blank' href='http://" . $user->networks[0]->url . "'>" . $user->networks[0]->url . "</a>";
                    } else {
                        $socialModifiable = true;
                        $twitterIndex = 0;
                        ?>
                        <input id="inputFacebook" name="fb" type="text" placeholder="Facebook URL" class="input-xlarge" />
                        <p class="help-block">exemple : www.facebook.com/myfbprofile</p>
                        <?php
                    }
                    ?>
                </div>
                <div class="clear"></div>
                <div class="span2 label-profile" >Twitter URL</div>
                <div class="span2 value-profile" id="divTwitter">
                    <?php
                    if (isset($user->networks[$twitterIndex]->id) && ($user->networks[$twitterIndex]->id == 2)) {
                        echo "<a target='_blank' href='http://" . $user->networks[$twitterIndex]->url . "'>" . $user->networks[$twitterIndex]->url . "</a>";
                    } else {
                        $socialModifiable = true;
                        ?>
                        <input id="inputTwitter" name="twitter" type="text" placeholder="Twitter Profile" class="input-xlarge">
                        <?php
                    }
                    ?>
                </div>
                <div class="span2">
                    &nbsp;
                </div>
                <div class="clear"></div>

                <?php if ($socialModifiable) {
                    ?>
                    <div class="span3">
                        <div class="controls">
                            <button id="savesocial" name="savesocial" class="btn btn-primary">Save social information</button>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <?php
                }
                ?>
            </form>
        </div>
    </div>
    <script>
        $('#myTab a').click(function(e) {
            e.preventDefault();
            $(this).tab('show');
        })
    </script>
</div>

<div id="profileModal"  class="modal hide fade span4" style="text-align: center" >
</div>
<div id="contactModal"  class="modal hide fade span4" style="text-align: center" >
</div>
<div id="socialModal"  class="modal hide fade" style="text-align: center" >
</div>
<div id="photoModal"  class="modal hide fade span4" style="text-align: center" >
</div>

<script>
    $("#saveprofile").click(function(event) {
        //alert("starting ajax ..");
        var url = "<?php echo site_url("profile/saveProfile"); ?>";
        $.ajax({
            type: "POST",
            url: url,
            async: true,
            timeout: 15000, // 30 secondes
            data: $("#frm_profile").serialize(), // serializes the form's elements.
            success: function(data) {
                if (data === "1") {
                    //make inputs readonly
                    if ($("#inputBirthday").val() !== "") {
                        $("#divBirthday").html($("#inputBirthday").val());
                    }

                    if ($("#inputPresentation").val() !== "") {
                        $("#divPresentation").html($("#inputPresentation").val());
                    }
                }
            },
            complete: function(a) {
                //console.log(a);
//                    ajaxStop();
            }
        });
        return false;
    });

    $("#savecontact").click(function(event) {

        var url = "<?php echo site_url("profile/saveContact"); ?>";
        $.ajax({
            type: "POST",
            url: url,
            async: true,
            timeout: 15000, // 30 secondes
            data: $("#frm_contact").serialize(), // serializes the form's elements.
            success: function(data) {
                if (data === "1") {
                    //make inputs readonly
                    if ($("#inputCity").val() !== "") {
                        $("#divCity").html($("#inputCity").val());
                    }
                    if ($("#inputCountry").val() !== "") {
                        $("#divCountry").html($("#inputCountry").val());
                    }
                    if ($("#inputMobile").val() !== "") {
                        $("#divMobile").html($("#inputMobile").val());
                    }
                }
            },
            complete: function(a) {
                //console.log(a);
//                    ajaxStop();
            }
        });
        return false;
    });

    $("#savesocial").click(function(event) {

        var url = "<?php echo site_url("profile/saveSocial"); ?>";
        $.ajax({
            type: "POST",
            url: url,
            async: true,
            timeout: 15000, // 30 secondes
            data: $("#frm_social").serialize(), // serializes the form's elements.
            success: function(data) {
                if (data === "1") {
                    //make inputs readonly
                    if ($("#inputFacebook").val() !== "") {
                        var html = "<a target='_blank' href='http://"
                                + $("#inputFacebook").val() + "'>" + $("#inputFacebook").val() + "</a>";
                        $("#divFacebook").html(html);
                    }
                    if ($("#inputTwitter").val() !== "") {
                        var html = "<a target='_blank' href='http://"
                                + $("#inputTwitter").val() + "'>" + $("#inputTwitter").val() + "</a>";
                        $("#divTwitter").html(html);
                    }
                }
            },
            complete: function(a) {
                //console.log(a);
                // ajaxStop();
            }
        });
        return false;
    });
</script>
